
type MessageBoxType = 'info' | 'warning' | 'error' | 'success'
export namespace MessageBox {
    const state = {
        box: null as HTMLDivElement | null,
        div: null as HTMLDivElement | null,
        timer: null as any
    }

    export function show(t: MessageBoxType, msg: string, duration = 2000) {
        if (!state.box || !state.div) {
            state.box = document.createElement('div')
            state.box.attachShadow({ mode: 'open' })
            document.body.appendChild(state.box)

            state.div = document.createElement('div')
            state.box.shadowRoot?.appendChild(state.div)
            const style = document.createElement('style')
            style.innerHTML = `
            .message-box{
    position: fixed;
    z-index: 9999;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #181818;
    border: solid 1px #3d3d3d;
}

.message-box-hide{
    display: none;
}

.message-box-error{
    color: #B71C1C;
}

.message-box-success{
    color: #4CAF50;
}

.message-box-info{
    color: #2196F3;
}

.message-box-warning{
    color: #FFC107;
}
            `
            state.box.shadowRoot?.appendChild(style)
            state.div.className = 'message-box'
        }
        state.div.innerText = msg
        state.div.className = `message-box message-box-${t}`

        clearTimeout(state.timer)
        state.timer = setTimeout(() => {
            if (state.div) {
                state.div.className = `message-box message-box-hide`
            }
        }, duration)
    }

    export function success(msg: string, duration = 2000) {
        show('success', msg, duration)
    }
    export function info(msg: string, duration = 2000) {
        show('info', msg, duration)
    }

    export function error(msg: string, duration = 2000) {
        show('error', msg, duration)
    }

    export function warning(msg: string, duration = 2000) {
        show('warning', msg, duration)
    }
}